<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spd" tagdir="/WEB-INF/tags/admin/"%>
<spd:layout>

<jsp:attribute name="head">
	<!-- html的头部内容，如title、css等。 -->
	<title>新闻分类</title>
	<style type="text/css">
		
	</style>
</jsp:attribute>


<jsp:attribute name="body">
<!-- 页面的主要内容 -->
<div class="row">
	<div class="col-md-12">
		<!--box-->
		<div class="box box-primary">
			<div class="box-body">
				<div class="btn-group">
					<button class="btn btn-primary" id="btnAdd" style="width: 110px">添加分类</button>
					<button class="btn btn-primary" id="btnEdit" style="width: 110px">编辑分类</button>
					<button class="btn btn-primary" id="btnDelete" style="width: 110px">删除分类</button>
				</div>
				&nbsp;
				<button class="btn btn-default" id="btnReload" style="width: 110px;">重新加载</button>				
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<!-- /.row -->

<div class="row">
	<div class="col-md-12">
		<div class="box box-primary">
			<div class="box-body no-padding">
				<table id="table"></table>
				<!-- /#table -->
			</div>
			<!-- /.box-body -->
		</div>	
	</div>
</div>
<!-- /.row -->
</jsp:attribute>


<jsp:attribute name="dialog">
<!-- 页面的dialog，注意不能放到body中 -->
<form id="formAdd" method="post">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">上级分类</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="parentName" placeholder="请选择上级分类，如果是顶级分类请留空">
						<input type="hidden" name="parentId" value="0">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="请输入分类名称，不超过20个字。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类编号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="code" placeholder="请输入分类编号，不超过30个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类排序</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sort" placeholder="在同一层级的排序，值越小越靠前" value="1000">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formAdd -->

<form id="formEdit" method="post">
	<input name="id" type="hidden">
	<table class="table table-bordered spd-table">
		<tbody>
			<tr>
				<td style="width: 100px;"><label class="spd-label">上级分类</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="parentName" placeholder="请选择上级分类，如果是顶级分类请留空">
						<input type="hidden" name="parentId" value="0">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类名称</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="name" placeholder="请输入分类名称，不超过20个字。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类编号</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="code" placeholder="请输入分类编号，不超过30个字符。">
					</div>
				</td>
			</tr>
			<tr>
				<td><label class="spd-label">分类排序</label></td>
				<td>
					<div class="spd-validate">
						<input class="form-control" type="text" name="sort" placeholder="在同一层级的排序，值越小越靠前" value="1000">
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</form>
<!-- /#formEdit -->

<div id="dialogParent">
	<ul id="pCategoryTree" class="ztree" style="width:100%;height:100%;overflow:auto;"></ul>
</div>
<!-- /#dialogParentMenu -->

</jsp:attribute>


<jsp:attribute name="script">
	<!-- 页面的JS脚本 -->
	<script type="text/javascript">
		$(function() {
			$('#btnReload').on('click', function(){
				window.location.reload();
				return false;
			});
			
			$('#btnAdd').on('click', function(){
				SpdUI.openDialog('#formAdd');
				return false;
			});
			
			$('#btnDelete').on('click', function(){
				var nodeData = SpdUI.getTreeTableSelectedNodeData('#table');
				
				if(!nodeData){
					return;
				}
				
				SpdUI.confirm('确定删除所选分类？', function(){
					SpdUI.getJSON({
						url: SpdUI.contextPath + '/admin/news/category/delete.do?id=' + nodeData.id,
						success: function(data, json){
							window.location.reload();
							//$('#table').treetable('removeNode', nodeData.id);
						}
					});
				});
				return false;
			});
			
			$('#btnEdit').on('click', function(){
				var nodeData = SpdUI.getTreeTableSelectedNodeData('#table');
				
				if(!nodeData){
					return;
				}
				
				SpdUI.openFormDialog('#formEdit', {
					id: nodeData.id
				});
			});
			
			$('form input[name="parentName"]').on('click', function(){
				var $this = $(this), $form = $this.closest('form');
				
				SpdUI.openDialog('#dialogParent', {
					form: $form
				});
				
				return false;
			});
			
			SpdUI.treetable('#table', {
				expandAll: true,
				columns : [{
					tree : true,
					title : '分类名称',
					field : 'name',
					width : 300,
					align: 'left',
					formatter: function(value, row, index) {
						return '<span>' + value + '</span>';
					}
				}, {
					title : '分类编号',
					field : 'code',
					align : 'left'
				}],
				dataType : 'ajax',
				url : SpdUI.contextPath + '/admin/news/category/queryAll.do'
			});

			SpdUI.formDialog('#formAdd', {
				title : '添加分类',
				validate : {
					name : {
						rule : 'required;length(1~20);',
						msg : '请输入分类名称，不得超过20个字。'
					},
					code : {
						rule : 'required;length(1~30);',
						msg : '请输入分类编号，不超过30个字符。'
					},
					sort: {
						rule: 'required;integer(+)',
						msg: '请输入大于0的排序'
					}
				},
				onsubmit: function($form, formData, dialog, dialogData) {
					SpdUI.ajaxSubmit($form, {
						url: SpdUI.contextPath + '/admin/news/category/add.do',
						success: function(data, json){
							dialog.close();
							window.location.reload();
						}
					});
				},
				onhide: function($form, formData, dialog, dialogData) {					
				}
			});
			
			SpdUI.formDialog('#formEdit', {
				title : '编辑分类',
				validate : {
					name : {
						rule : 'required;length(1~20);',
						msg : '请输入分类名称，不得超过20个字。'
					},
					code : {
						rule : 'required;length(1~30);',
						msg : '请输入分类编号，不超过30个字符。'
					},
					sort: {
						rule: 'required;integer(+)',
						msg: '请输入大于0的排序'
					}
				},
				onsubmit: function($form, formData, dialog, dialogData) {
					if(formData.id == formData.parentId){
						SpdUI.alert('不能选择自己作为上级分类！');
						return;
					}
					
					SpdUI.ajaxSubmit($form, {
						url: SpdUI.contextPath + '/admin/news/category/update.do',
						success: function(data, json){
							dialog.close();
							window.location.reload();
						}
					});
				},
				onshow: function($form, formData, dialog, dialogData) {
					SpdUI.getJSON({
						url: SpdUI.contextPath + '/admin/news/category/queryById.do?id=' + formData.id,
						success: function(data, json){
							SpdUI.objectToForm($form, data);
						},
						failure: function(json, message){
							SpdUI.alert(message || '加载分类失败！');
						}
					});
				},
				onhide: function($form, formData, dialog, dialogData) {
				}
			});
			
			SpdUI.dialog('#dialogParent', {
				title: '选择上级分类',
				closeLabel: '清空选择',
				buttons: [{
					label: '确定选择',
					cssClass: 'btn-primary',
					action: function(dialog, dialogData, dialogBody) {
						var tree = $.fn.zTree.getZTreeObj('pCategoryTree'),
							nodes = tree.getSelectedNodes(),
							$form = dialogData.form,
							node;
						
						if(nodes && nodes.length > 0){
							node = nodes[0];
							
							if(node.id !== 0){
								$form.find('input[name="parentName"]').val(node.name);
								$form.find('input[name="parentId"]').val(node.id);
							}							
						}
						
						dialog.close();
					}
				}],
				onclose: function(dialog, dialogData, dialogBody) {
					var $form = dialogData.form;
					
					$form.find('input[name="parentName"]').val('');
					$form.find('input[name="parentId"]').val('');
				},
				oncreate: function(dialog, dialogData, dialogBody) {
					$('#pCategoryTree').height($(window).height() - 300);
				},
				onhide: function(dialog, dialogData, dialogBody){
					$.fn.zTree.destroy('pCategoryTree');
				},
				onshow: function(dialog, dialogData, dialogBody) {
					SpdUI.getJSON({
						url: SpdUI.contextPath + '/admin/news/category/queryAll.do',
						success: function(data, json){								
							var tmp = [{
								id: 0,
								name: '新闻分类列表',
								open: true
							}];
							
							$.each(data, function(i, v){
								tmp.push({
									id: v.id,									
									parentId: v.parentId,
									code: v.code,
									name: v.name
								});
							});
							
							$.fn.zTree.init($('#pCategoryTree'), {
								data: {
									simpleData: {
										enable: true,
										pIdKey: 'parentId'
									}
								},
								view: {
									selectedMulti: false
								}
							}, tmp);
						},
						failure: function(json, message){
							SpdUI.alert('加载分类失败！');
						}
					});
				}
			});
		});
	</script>
</jsp:attribute>

</spd:layout>